<template>
    <view class="page">
        <view class="card">
            <view class="title">银行卡信息</view>
            <view class="img-wrap">
                <image :src="formData.cardImgFront|mmvImageUrl"></image>
                <image :src="formData.cardImgBack|mmvImageUrl"></image>
            </view>
            <view class="list">
                <view class="label">客户手机号码 <text>{{formData.phone}}</text></view>
                <view class="label">开户行 <text>{{formData.yinhang}}</text></view>
                <view class="label">银行卡号 <text>{{formData.kahao}}</text></view>
            </view>
            <u-checkbox-group>
                <u-checkbox :checked="checked" shape="circle" activeColor="#12B9A3" labelColor="#12B9A3" labelSize="12" label="已阅读并同意代扣协议"></u-checkbox>
            </u-checkbox-group>
        </view>
    </view>
</template>

<script>
import isEmpty from 'lodash/isEmpty';
import * as orderApi from '@/common/apis/order-api';

export default {
    data() {
        return {
            checked: true,
            formData: {
                cardImgFront: "/static/cardImgFront.jpg", // 银行卡正面
                cardImgBack: "/static/cardImgBack.jpg", // 银行卡背面
                mobileNo: "", // 手机号
                bankCardNo: "", // 银行卡号
                bankDeposit: "", // 开户行
            },
        };
    },
    async onLoad() {
        await this.getOneSignedBank(); // 获取银行卡签约信息
    },
    methods: {
        /**
         * 获取银行卡签约信息(判断是否已签约)
         */
        async getOneSignedBank() {
            try {
                const result = await orderApi.getOneSignedBank();
                if (!isEmpty(result)) {
                    this.formData = result; // 银行卡签约信息
                    return true;
                } else {
                    console.log('未获取到签约信息');
                }
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.page {
    padding: $page_padding;
}
.card {
    padding: 40upx 16upx;
    margin-bottom: 30upx;
    .title {
        font-size: 28upx;
        font-weight: bold;
        color: #333;
        margin-bottom: 29upx;
    }
    .img-wrap {
        margin-bottom: 34upx;
        display: flex;
        justify-content: space-between;
        image {
            width: 330upx;
            height: 184upx;
        }
    }
    .desc {
        margin-bottom: 49upx;
        font-size: 26upx;
        font-weight: bold;
        color: #999;
    }

    .list {
        .label {
            height: 40upx;
            margin-bottom: 28upx;
            font-size: 28upx;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>
